/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* stylelint-disable */
.console-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: all 0.2s ease-in;

  .console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px;
    border-bottom: 1px solid var(--Neutral-20);
    background: var(--Neutral-00);
    flex-shrink: 0;
    min-height: 38px;

    h2 {
      color: var(--Neutral-90, #e1e2e3);
      font-family: "Google Sans";
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px;
      margin: 0;
      opacity: 0;
      display: none;
      transition: opacity 0.2s ease-in;
    }

    .toggle-button {
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 4px;
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #b4b8bb;
      flex-shrink: 0;

      svg {
        width: 20px;
        height: 20px;
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .console-content {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
  }

  &.open {
    .console-header h2 {
      display: block;
      opacity: 1;
    }

    .side-panel {
      width: 400px;
    }
  }

  &:not(.open) {
    .console-header {
      padding: 6px 5px;

      .toggle-button {
        margin: 0 auto;
      }
    }

    .side-panel {
      width: 40px;

      .side-panel-container {
        opacity: 0;
        display: none;
        transition: all 0.2s ease-in allow-discrete;
        transition-delay: 0.1s;
      }

      .connection-settings {
        opacity: 0;
        display: none;
        transition: all 0.2s ease-in allow-discrete;
      }

      .control-tray {
        opacity: 0;
        display: none;
        transition: all 0.2s ease-in allow-discrete;

        .actions-nav {
          opacity: 0;
          display: none;
        }

        .connection-status {
          opacity: 0;
          display: none;
        }
      }

      .indicators {
        .react-select {
          opacity: 0;
          display: none;
          transition: all 0.2s ease-in allow-discrete;
        }

        .streaming-indicator {
          width: 30px;
          opacity: 0;
        }
      }

      .input-container {
        opacity: 0;
        display: none;
        transition: all 0.2s ease-in allow-discrete;
      }

      .audio-pulse-bottom {
        .pulse-container {
          .pulse-label {
            opacity: 0;
            display: none;
          }
        }
      }
    }
  }
}

.side-panel {
  width: 400px;
  transition: width 0.2s ease-in;

  .react-select {
    background: var(--Neutral-20);
    color: var(--Neutral-90);
    width: 193px;
    height: 30px;

    .react-select__single-value {
      color: var(--Neutral-90);
    }

    .react-select__menu {
      background: var(--Neutral-20);
      color: var(--Neutral-90);
    }

    .react-select__option {
    }
    .react-select__value-container {
    }
    .react-select__indicators {
    }
    .react-select__option:hover,
    .react-select__option:focus,
    .react-select_option:focus-within {
      background: var(--Neutral-30);
    }
    .react-select__option--is-focused: {
      background: var(--Neutral-30);
    }
  }
  background: var(--Neutral-00);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: all 0.2s ease-in;
  font-family: Arial, sans-serif;
  border-right: 1px solid var(--gray-600);
  color: var(--Neutral-90, #e1e2e3);
  font-family: var(--font-family);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 20.8px */

  .hidden {
    display: none !important;
  }


  .indicators {
    display: flex;
    padding: 24px 25px;
    justify-content: flex-end;
    gap: 21px;
    .streaming-indicator {
      user-select: none;
      border-radius: 4px;
      border: 1px solid var(--Neutral-20, #2a2f31);
      background: var(--Neutral-10, #1c1f21);
      display: flex;
      width: 136px;
      height: 30px;
      padding-left: 4px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      text-align: center;
      font-family: "Space Mono";
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      transition: width 0.2s ease-in;

      &.connected {
        color: var(--Blue-500, #0d9c53);
      }
    }
  }

  .side-panel-container {
    align-self: flex-end;
    width: 400px;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    /*scrollbar-gutter: stable both-edges;*/
  }

  .connection-settings {
    border-bottom: 1px solid var(--Neutral-20);
    
    .connection-expander {
      background: var(--Neutral-10);
      border: none;
      color: var(--Neutral-90);
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      padding: 12px 25px;
      width: 100%;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      &:hover {
        background: var(--Neutral-15);
      }
      
      span {
        font-size: 12px;
      }
    }
    
    .connection-content {
      padding: 0 25px 12px;
      background: var(--Neutral-05);
      
      .setting-group {
        margin-bottom: 12px;
        
        label {
          display: block;
          color: var(--Neutral-80);
          font-size: 13px;
          margin-bottom: 4px;
        }
        
        .setting-input {
          width: 100%;
          background: var(--Neutral-15);
          border: 1px solid var(--Neutral-20);
          border-radius: 4px;
          color: var(--Neutral-90);
          font-size: 13px;
          padding: 8px 12px;
          
          &:focus {
            outline: none;
            border-color: var(--Blue-500);
          }
        }
      }
      
      .feedback-button {
        background: var(--Neutral-20);
        border: 1px solid var(--Neutral-30);
        border-radius: 4px;
        color: var(--Neutral-90);
        cursor: pointer;
        font-size: 13px;
        padding: 8px 16px;
        
        &:hover {
          background: var(--Neutral-25);
        }
      }
    }
  }

  .control-tray {
    border-bottom: 1px solid var(--Neutral-20);
    padding: 12px 25px;

    .actions-nav {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;

      .action-button {
        background: var(--Neutral-15);
        border: 1px solid var(--Neutral-20);
        border-radius: 8px;
        color: var(--Neutral-70);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 40px;
        transition: all 0.2s ease;

        &:hover {
          background: var(--Neutral-20);
          color: var(--Neutral-90);
        }

        &.connect-toggle {
          background: var(--Blue-600);
          border-color: var(--Blue-600);
          color: white;
          
          &:hover {
            background: var(--Blue-700);
          }
          
          &.connected {
            background: var(--Red-600);
            border-color: var(--Red-600);
            
            &:hover {
              background: var(--Red-700);
            }
          }
        }

        &.mic-button {
          &:hover {
            color: var(--Blue-500);
          }
        }

        // Active state for buttons when they're "on"
        &.active {
          background: var(--Blue-600) !important;
          border-color: var(--Blue-600) !important;
          color: white !important;
          
          &:hover {
            background: var(--Blue-700) !important;
            border-color: var(--Blue-700) !important;
          }
        }

        &.no-action {
          cursor: default;
          border-style: dashed;
          
          &:hover {
            background: var(--Neutral-15);
            color: var(--Neutral-70);
          }
        }

        .material-symbols-outlined {
          font-size: 20px;
        }
      }

      &.disabled .action-button:not(.connect-toggle) {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        
        &:hover {
          background: var(--Neutral-15);
          color: var(--Neutral-70);
        }
      }
      
      // Ensure connect button is always clickable
      .action-button.connect-toggle {
        pointer-events: auto !important;
        cursor: pointer !important;
      }
    }

    .connection-status {
      display: flex;
      justify-content: center;

      .text-indicator {
        color: var(--Neutral-60);
        font-size: 12px;
        font-weight: 500;
        
        &.connected {
          color: var(--Blue-500);
        }
      }
    }
  }

  .audio-pulse-bottom {
    border-top: 1px solid var(--Neutral-20);
    padding: 12px 25px;
    flex-shrink: 0;
    background: var(--Neutral-05);

    .pulse-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;

      .pulse-label {
        color: var(--Neutral-80);
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }
  }

  .input-container {
    height: 50px;
    flex-grow: 0;
    flex-shrink: 0;
    border-top: 1px solid var(--Neutral-20);
    padding: 14px 25px;
    overflow: hidden;

    .input-content {
      position: relative;
      background: var(--Neutral-10);
      border: 1px solid var(--Neutral-15);
      height: 22px;
      border-radius: 10px;
      padding: 11px 18px;

      .send-button {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        background: none;
        border: 0;
        color: var(--Neutral-20);
        cursor: pointer;
        transition: color 0.1s ease-in;
        z-index: 2;

        &:hover {
          color: var(--Neutral-60);
        }
      }

      .input-area {
        background: none;
        color: var(--Neutral-90);
        field-sizing: content;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: inline-block;
        width: calc(100% - 72px);
        max-height: 20px;
        outline: none;
        --webkit-box-flex: 1;
        flex: 1;
        word-break: break-word;
        overflow: auto;
        padding: 14px 18px;
        border: 0;
        resize: none;
      }

      .input-content-placeholder {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        z-index: 1;
        height: 100%;
        width: 100%;
        pointer-events: none;
        user-select: none;
        padding: 0px 18px;
        white-space: pre-wrap;
      }
    }
  }
}

.side-panel-responses,
.side-panel-requests {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  display: block;
  margin-left: 8px;
}

.top {
  width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  height: 30px;
  display: flex;
  align-self: flex-end;
  align-items: center;
  transition: all 0.2s ease-in;
}
.top button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1.75rem;
  padding: 4px;
}
